<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>

    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        body{
            background-color: rgb(255, 255, 255);
        }
    </style>
</head>
<body>
<div class="tu">
    <div id="hanging" style="height:700px;width: 500px;background:#0a75a1;float: left"></div>
    <div id="hanging1" style="height:700px;width: 500px;background:#0a75a1;float: right"></div>
</div>
<div>
    <div>
        <div style="text-align: center"><h1>参加测试人员</h1></div>
        <table id="demo" lay-filter="test" style="text-align: center;width: 500px;background-color: snow"></table>
    </div>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看详情</a>
</script>
</body>
<script>
    layui.use(['table','laydate', 'layer'], function () {
        var table = layui.table;
        var myTable = table.render({
            elem: '#demo'
            , height: 500
            , url: '/result/selectAll' //数据接口
            , page: false //开启分页
            , autoSort: false
            , cols: [
                [ //表头
                    {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', hide:true}
                    , {field: 'name', title: '测试人', width: 90, sort: true}
                    , {field: 'red', title: '红色性格', width: 90, style: 'color: #FF5722;'}
                    , {field: 'yellow', title: '黄色性格', width: 90, style: 'color: #FFB800;'}
                    , {field: 'blue', title: '蓝色性格', width: 90, style: 'color: #12C2E7FF;'}
                    ,{field: 'green', title: '绿色性格', width: 90, style: 'color: #009688;'}
                    ,{fixed: 'right',title:'操作', width:80, align:'center', toolbar: '#barDemo'}
                ]
            ]
        });
        table.on('tool(test)', function (obj) {
            //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            let idList = [];
            idList.push(data.id);
            if (layEvent === 'detail') {
                window.open("http://127.0.0.1:8080/showResultOne?id="+data.id)
            }
        });

        //加载数据
        Getdatachart();
        Getdatachart1();
    });
    function Getdatachart() {
        $.ajax({
            url: "/resultOne/getNum",
            type: "get",
            dataType: "json",
            success: function (result) {
                if (result.code == 0) {
                    GetChart0(result.data);
                }
            }
        });
    }
    function Getdatachart1(){
        $.ajax({
            url: "/resultOne/getNum1",
            type: "get",
            dataType: "json",
            success: function (result) {
                if (result.code == 0) {
                    GetChart1(result.data);
                }
            }
        });
    }
    function GetChart0(date) {
        const chartDom = document.getElementById('hanging');
        const myChart = echarts.init(chartDom);
        let option;
        option = {
                title: {
                    text: '性格分析图',
                    left: 'center'
                },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '性格分布',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    color:['#ec0c0c', '#efed2f', '#12c2e7','#40f633'],
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: date
                }
            ]
        };
        // option = {
        //     title: {
        //         text: '性格分析图',
        //         subtext: '个人性格分布',
        //         left: 'center'
        //     },
        //     tooltip: {
        //         trigger: 'item',
        //     },
        //     legend: {
        //         left: 'center',
        //         top: 'bottom',
        //         data: [
        //             '红',
        //             '黄',
        //             '蓝',
        //             '绿'
        //         ]
        //     },
        //     color:['#ec0c0c', '#efed2f', '#12c2e7','#40f633'],
        //     toolbox: {
        //         show: true,
        //         feature: {
        //             mark: { show: true },
        //             dataView: { show: true, readOnly: false },
        //             restore: { show: true },
        //             saveAsImage: { show: true }
        //         }
        //     },
        //     series: [
        //         {
        //             name: '个人性格',
        //             type: 'pie',
        //             radius: [40, 140],
        //             center: ['50%', '50%'],
        //             roseType: 'radius',
        //             itemStyle: {
        //                 borderRadius: 40
        //             },
        //
        //             label: {
        //                 show: false
        //             },
        //             emphasis: {
        //                 label: {
        //                     show: true
        //                 }
        //             },
        //             data: date
        //         }
        //     ],
        // };
        option && myChart.setOption(option);
        window.onresize = myChart.resize;
    }
    function GetChart1(date) {
        const chartDom = document.getElementById('hanging1');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            title: {
                text: '测试人员趋势'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {},
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date[0]
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 人'
                }
            },
            series: [
                {
                    name: '测试人数',
                    type: 'line',
                    data: date[1],
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' }
                        ]
                    },
                    markLine: {
                        data: [{ type: 'average', name: 'Avg' }]
                    }
                },
            ]
        };
        option && myChart.setOption(option);
    }
</script>
</html>